<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" >
<head><title>Sudoku4Panel</title></head><body>

<wicket:head>
    <link rel="stylesheet" href="./css/sudoku4.css" media="screen">
    <script type="text/javascript" src="js/sudoku4.js"></script>
</wicket:head>

<wicket:panel>
<div id="sdkcenter">
	<div id="sdkbacksheet">
		<form wicket:id="sudoku4form" id="sudoku4form" class="sudoku4form" autocomplete="off">
	        <fieldset class="squareHolder">
			    <div class="row" id="panelrow0">
				    <input wicket:id="A1" id="A1" value="" type="text" size="1" maxlength="1" class="box">
				    <input wicket:id="A2" id="A2" value="" type="text" size="1" maxlength="1" class="box">
				    <input wicket:id="A3" id="A3" value="" type="text" size="1" maxlength="1" class="box">
				    <input wicket:id="A4" id="A4" value="" type="text" size="1" maxlength="1" class="box">
			    </div>
			    <div class="row" id="panelrow1">
				    <input wicket:id="B1" id="B1" value="" type="text" size="1" maxlength="1" class="box">
				    <input wicket:id="B2" id="B2" value="" type="text" size="1" maxlength="1" class="box">
				    <input wicket:id="B3" id="B3" value="" type="text" size="1" maxlength="1" class="box">
				    <input wicket:id="B4" id="B4" value="" type="text" size="1" maxlength="1" class="box">
			    </div>
			    <div class="row" id="panelrow2">
				    <input wicket:id="C1" id="C1" value="" type="text" size="1" maxlength="1" class="box">
				    <input wicket:id="C2" id="C2" value="" type="text" size="1" maxlength="1" class="box">
				    <input wicket:id="C3" id="C3" value="" type="text" size="1" maxlength="1" class="box">
				    <input wicket:id="C4" id="C4" value="" type="text" size="1" maxlength="1" class="box">
			    </div>
			    <div class="row" id="panelrow3">
				    <input wicket:id="D1" id="D1" value="" type="text" size="1" maxlength="1" class="box">
				    <input wicket:id="D2" id="D2" value="" type="text" size="1" maxlength="1" class="box">
				    <input wicket:id="D3" id="D3" value="" type="text" size="1" maxlength="1" class="box">
				    <input wicket:id="D4" id="D4" value="" type="text" size="1" maxlength="1" class="box">
			    </div>
			</fieldset>
			<fieldset class="buttonHolder">
	            <input wicket:id="check" value="Check" wicket:message="value:button.check" type="submit" class="large red button">
		        <input wicket:id="newSudoku" value="New Sudoku" wicket:message="value:button.new" type="submit" class="large red button">
		    </fieldset>
		</form>
	</div>
</div>

<div id="help" class="help">
    <table id="dpophelp" class="dpopup"> 
        <tbody><tr> 
            <td id="topleft" class="corner"></td> 
            <td class="top"></td> 
            <td id="topright" class="corner"></td> 
        </tr> 

        <tr> 
            <td class="left"></td> 
            <td id="contentHelp" class="popup-contents">
                <table> 
                    <tbody>
                    <tr> 
                        <td><input id="close" name="close" type="button" value="x" class="close red button" /></td> 
                    </tr> 
                    <tr> 
                        <td><h3><wicket:message key="help.title">HELP!</wicket:message></h3>
                        	<h4><wicket:message key="help.mess.init">If you need help, click Advice button!</wicket:message></h4>
                        </td> 
                    </tr>   
                    
                    <tr> 
                        <td>
                        <div>
                        <form wicket:id="sudoku4HelpForm" id="sudoku4HelpForm" autocomplete="off">
                        	<ul>
                        	<li wicket:id="listhelp" id='listhelp'>
                        		<span wicket:id="messagehelp"></span>
                        	</li>
                        	</ul>
                        	<input wicket:id="advice" name="advice" type="submit" wicket:message="value:button.advice" value="Advice »" class="small red radiationRed button" />
                        </form>
                        </div>
                        
                        </td> 
                    </tr> 
                    </tbody>
                </table> 
            </td> 
            <td class="right"></td>    
        </tr> 

        <tr> 
            <td class="corner" id="bottomleft"></td> 
            <td class="bottom"><img width="30" height="29" alt="popup tail" src="./images/bubble/bubble-tail2.png"/></td> 
            <td id="bottomright" class="corner"></td> 
        </tr> 
       </tbody>
    </table> 
</div>


<div id="buttonHelpHide">
	<input id="buttonHelp" name="buttonHelp" type="button" value="HELP!" wicket:message="value:help.title" class="help red radiationRed button" />
</div>

<div id="blockWin" ><span wicket:id="score">Hola!</span></div>

<div class="popup">
	<table id="dpop" class="dpopup"> 
        	<tbody><tr> 
        		<td id="topleft" class="corner"></td> 
        		<td class="top"></td> 
        		<td id="topright" class="corner"></td> 
        	</tr> 
 
        	<tr> 
        		<td class="left"></td> 
        		<td class="popup-contents"><div wicket:id="feedback" id='feedback'></div></td> 
        		<td class="right"></td>    
        	</tr> 
 
        	<tr> 
        		<td class="corner" id="bottomleft"></td> 
        		<td class="bottom"><img width="30" height="29" alt="popup tail" src="./images/bubble/bubble-tail2.png"/></td> 
        		<td id="bottomright" class="corner"></td> 
        	</tr> 
        </tbody>
    </table> 
</div>
	
<div id="keyboard">  
    
	<div id="row0">			
		<input name="1" type="button" value="1" class="small blue button" />
		<input name="2" type="button" value="2" class="small blue button" />			
	</div> 
	<div id="row1">			
		<input name="3" type="button" value="3" class="small blue button"/>
		<input name="4" type="button" value="4" class="small blue button"/>
	</div> 
</div>

<div id="veil"></div>
	
</wicket:panel>


</body>
</html>